<template>
  <div>
    <p>{{ a }}</p>
    <p>{{ b }}</p>
    <div><button @click="setA">修改</button></div>
    <div><button @click="setB">修改</button></div>

  
    <ul>
      <li v-for="item in arr">{{item}}</li>
    </ul>
  </div>
</template>
  
<script>
import { ref,reactive,toRefs,computed,watch} from 'vue'
export default {
  setup() {
    let data=reactive({
      a:1,
      b:1,
      arr:['111','222','333'],
      setA:function(){
        data.b++;
      },
      setB: computed(() => {
        return data.a = data.b * 5;
      }),
  
    })
    watch( ()=> data.a,
      (newV, oldV) => {
        console.log(newV, oldV);
      }
    )

    

    return {...toRefs(data)}
  }
}
</script>
  
<style lang="less" scoped></style>